<template>
    <div
        class="
            hover:-translate-y-2
            transform
            border border-gray-200
            search-cell
            hover:shadow-xl
            transition
            items-center
            w-4/5
            p-4
            flex
            rounded-2xl
            my-4
        "
    >
        <div
            class="flex-grow truncate cursor-pointer"
            @click="$emit('showCode', snippet)"
        >
            <div class="underline text-lg">{{ snippet.title }}</div>
            <div class="text-sm h-8 truncate text-gray-500">
                {{ snippet.description }}
            </div>
        </div>
        <div class="p-2">
            <div class="Icon Btn" @click="copyCode(snippet.body)">
                assignment
            </div>
            <div class="Icon Btn" @click="$emit('showCode', snippet)">code</div>
        </div>
    </div>
</template>

<script>
import copy from "@/utils/copy.js";
export default {
    props: ["snippet"],
    methods: {
        copyCode(text) {
            copy(text).then(() => console.info("复制代码成功"));
        },
    },
};
</script>

<style lang="less" scoped>
.Btn {
    @apply mx-2 text-xl text-blue-400 hover:bg-gray-300 transition cursor-pointer rounded select-none;
}
</style>
